<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormProps } from 'element-plus'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ElLoading } from 'element-plus'

const labelPosition = ref<FormProps['labelPosition']>('right')

const refForm = ref()
const formLabelAlign = ref({
    name: ''
})


const rules = {
    name: [
        { required: true, message: '请输入你的工号', trigger: 'blur' },
    ]
}
// console.log(formLabelAlign.name)
const register = async () => {
    if (!refForm.value) return;
    try {
        await refForm.value.validate()
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })

        console.log(formLabelAlign.value.name)
        let formData = new FormData();
        formData.append('jobNum', formLabelAlign.value.name);
        axios.post("register/591/", formData)
            .then((res: any) => {
                formLabelAlign.value.name = ''
                loading.close()
                ElMessage({
                    message: '注册成功~~~',
                    type: 'success',
                })
            })
            .catch((error: any) => {
                loading.close()
                ElMessage({
                    message: '注册失败，可能接口出问题了! 重试一下看看~~~',
                    type: 'error',
                })
                console.error(error);
            });
    } catch (error) {

    }
}

</script>

<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span style="color: #ffffff;">591账号注册</span>
                <!-- <el-button class="button" text>Operation button</el-button> -->
            </div>
        </template>
        <el-row :gutter="20" justify="center">
            <el-col :span="8" offset="8">
                <div class="grid-content ep-bg-purple" />
                <el-form ref="refForm" :model="formLabelAlign" :rules="rules">
                    <el-form-item label="输入工号：" prop="name">
                        <el-input @keydown.enter.prevent v-model="formLabelAlign.name" name="jobNum"
                            placeholder="填入工号便于提醒注册消息" />
                        注：默认自动充值6000点数
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="register">去注册</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>

<style>
* {
    margin: 0;
    padding: 0;
}

.card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;

}

.el-card__header {
    background-color: #545c64;
}

.box-card {
    width: 100%;
    height: 100%;
    min-height: 100vh;
}
</style>



<!-- <template>
    <el-row :gutter="20" justify="center">
        <el-col :span="8" offset="8">
            <h1>591账号注册</h1>
        </el-col>
    </el-row>
    <el-row :gutter="20" justify="center">
        <el-col :span="8" offset="8">
            <div class="grid-content ep-bg-purple" />
            <el-form-item label="输入工号：">
                <el-input @keydown.enter.prevent v-model="formLabelAlign.name" name="jobNum" />
            </el-form-item>
            <el-form-item>
                <el-button style='margin-left: 10px;' type="success" @click="register">去注册</el-button>
            </el-form-item>
        </el-col>
    </el-row>
</template> -->



<!-- <style>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
</style> -->
